<template>
    <Dialog :app-dialog="tipDialog">
        <div class="warning-tag">
            <div class="warning-tip">
                <el-icon color="#FF4D4F" size="16px"><WarningFilled /></el-icon>
                <span class="warning-text">因企微接口异常，当前系统客户标签与企微客户标签不一致，请先同步标签。</span>
            </div>
            <div class="warning-list">
                <div class="warning-title">你需要在客户标签页面同步并合并企微客户标签。</div>
                <div class="warning-word">
                    <div class="warning-label">
                        1、进入<span class="warning-title">「标签管理-客户标签」</span>页面；
                    </div>
                    <div class="warning-label">
                        2、点击<span class="warning-title">「更多操作」</span>下的<span class="warning-title">
                            「同步至企微」
                        </span>
                        和<span class="warning-title">「合并企微标签」</span>。
                    </div>
                </div>
            </div>
            <el-image src="http://static.scrm.keyid.cn/assets/images/web-pc/tag_warning.png" class="warning-img">
            </el-image>
        </div>
    </Dialog>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import Dialog from './Dialog.vue';

//异常提示-我知道了
const submitTip = () => {
    tipDialog.visible = false;
};
const tipDialog = reactive({
    visible: false,
    title: '异常提示',
    width: '800px',
    submit: submitTip,
    submitText: '我知道了'
});
// 打开异常提示弹框
const openAbnormal = () => {
    tipDialog.visible = true;
};

defineExpose({
    openAbnormal
});
</script>
<style lang="scss" scoped>
.warning-tag {
    padding: 8px 0 36px 0;
    .warning-tip {
        height: 35px;
        padding: 0 17px;
        display: flex;
        align-items: center;
        background: #fff1f0;
        border-radius: 2px;
        border: 1px solid #ffa39e;
        .warning-text {
            padding-left: 8px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.65);
        }
    }
    .warning-list {
        margin: 24px 0;
        .warning-title {
            font-size: 14px;
            font-weight: 600;
            color: #33302d;
            line-height: 14px;
        }
        .warning-word {
            margin-top: 12px;
            .warning-label {
                font-size: 14px;
                font-weight: 400;
                color: #585858;
                line-height: 20px;
            }
        }
    }
    .warning-img {
        width: 754px;
        height: 263px;
    }
}
</style>
